<template>
    <div style="padding: 0 17px">
        <Breadcrumb/>
        <div style="display: flex;flex-wrap: wrap; margin-top: 20px;">
            <el-input v-model="explanation" placeholder="日志内容"
                      style="width: 200px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <div style="width: 350px;display: flex">
                <el-date-picker
                        v-model="searchData"
                        type="datetimerange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                />
                <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;margin-left: 15px" @click="load">搜索
                </el-button>
            </div>
        </div>

        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
            <el-table-column prop="equipmentId" label="设备识别码" width="200"/>
            <el-table-column prop="explanation" label="日志内容" width="auto"/>
            <el-table-column prop="enterTime" label="添加时间" width="200"/>
            <el-table-column align="center" label="操作" fixed="right" width="180">
                <template v-slot="scope">
                    <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import Breadcrumb from "@/components/Breadcrumb.vue";

    export default {
        name: "FireSysData",
        components: {Breadcrumb},
        data() {
            return {
                currentData: {},
                id: '',     // 搜索框
                explanation: '',
                searchData: [],
                tableData: [],  // 表单
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        },
        mounted() {
            // 初始化加载用户数据
            this.load()
        },

        methods: {
            // 搜索及初始化
            load() {
                let startTime="", endTime=""
                if (this.searchData!==null&&this.searchData.length!==0){
                    startTime=this.searchData[0]
                    endTime=this.searchData[1]
                }
                request.get("/fire-sys-data/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize+"&equipmentId="+this.$route.query.equipmentId+"&explanation="+this.explanation+"&startTime="+startTime+"&endTime="+endTime).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "records") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            // 清空查询条件
            clearConditions() {
                this.keyWord = "";
            },
            reset(val) {
                this.isEdit = false;
                this.operationItemDialog = false;
                this.form = {};
                this.$refs[val].clearValidate();
            },
            // 删除确定弹窗
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post("/fire-sys-data/delete",scope).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
        }
    }
</script>

<style scoped>
    :deep(.el-table th .cell) {
        font-weight: 700
    }
</style>
